<template>
	<view class="advisory">
		<view class="advisory-top">
			<view class="advisory-ger">
				<text>个人中心</text>
			</view>
			<view class="advisory-ul" @click="personal">
				<image class="border" src="/static/image/index2.png" mode=""></image>
				<view class="advisory-li">
					<text>ID</text>
				</view>
				<view class="advisory-image">
					<image src="/static/image/ger.png" mode=""></image>
				</view>
			</view>
			<view class="advisory-se">
				<view class="advisory-flex">
					<view class="advisory-vip">
						<image src="/static/image/icon-vip.png" mode=""></image>
					</view>
					<view class="advisory-wb">
						<view class="advisory-wb-li">
							<text>会员名</text>
						</view>
						<view class="advisory-wb-lo">
							<text>到期日:2021-07-22</text>
						</view>
					</view>
				</view>
				<view class="advisory-xufei" @click="vip">
					<text>续费</text>
				</view>
			</view>
		</view>
		<advisorylist></advisorylist>
	</view>
</template>

<script>
	import advisorylist from "../../components/advisory/advisorylist.vue"
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			this.$post(this.api.indexhome).then((res) => {
				console.log(res)
			}).catch((res) => {
				console.log(err)
			})
		},
		methods: {
			vip() {
				uni.navigateTo({
					url: '../public/vip'
				})
			},
			personal() {
				uni.navigateTo({
					url: '../public/personal'
				})
			}
		},
		components: {
			advisorylist
		}
	}
</script>

<style lang="less" scoped>
	.advisory {
		.advisory-ger {
			width: 750rpx;
			height: 50rpx;
			text-align: center;
			padding: 80rpx 0 40rpx 0;

			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.advisory-top {
			width: 750rpx;
			height: 483rpx;
			background-image: url(../../static/image/icon-beijing.png);
			background-repeat: no-repeat;
			background-size: 750rpx 483rpx;

			.advisory-ul {
				display: flex;
				height: 150rpx;
				align-items: center;
				margin-top: 0rpx;

				.border {
					width: 107rpx;
					height: 107rpx;
					border-radius: 50%;
					margin: 106rpx 32rpx;
					border: 1rpx solid #CCCCCC;
				}

				.advisory-li {
					display: flex;
					align-items: center;

					text {
						display: block;
						font-size: 40rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.advisory-image {
					position: absolute;
					right: 40rpx;
					height: 280rpx;
					display: flex;
					align-items: center;

					image {
						width: 15rpx;
						height: 24rpx;
					}
				}
			}

			.advisory-se {
				height: 133rpx;
				width: 700rpx;
				margin: 0 auto;
				margin-top: 50rpx;
				background-image: url(../../static/image/gebj.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 686rpx 133rpx;
				display: flex;

				.advisory-flex {
					display: flex;

					.advisory-vip {
						padding: 47rpx 40rpx;

						image {
							width: 45rpx;
							height: 40rpx;
						}
					}

					.advisory-wb {
						height: 133rpx;
						width: 400rpx;
						display: flex;
						justify-content: center;
						flex-direction: column;

						.advisory-wb-li {
							text {
								font-size: 36rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FFB777;
							}
						}

						.advisory-wb-lo {
							text {
								font-size: 25rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFB777;
							}
						}
					}
				}

				.advisory-xufei {
					display: flex;
					justify-content: center;
					flex-direction: column;
					text-align: center;

					text {
						width: 136rpx;
						height: 48rpx;
						font-size: 27rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						line-height: 48rpx;
						background: linear-gradient(90deg, #FFE186 0%, #EE924E 100%);
						border-radius: 24px;

					}
				}
			}
		}
	}
</style>
